
<template>
  <div>
    <div class="func-wrap">
      <div class="func-start">( {{ args }} ) => {</div>
      <div class="func-help" @click="eventDocumentVisible = true">
        帮助文档？
      </div>
      <slot></slot>
      <div class="func-end">};</div>
    </div>

    <el-dialog
      v-model="eventDocumentVisible"
      width="70%"
      :close-on-click-modal="false"
      append-to-body
      destroy-on-close
      title="事件参数文档"
    >
      <custom-event-document></custom-event-document>
    </el-dialog>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from "vue";
import customEventDocument from "../event-document/index.vue";

export default defineComponent({
  components: { customEventDocument },
  props: {
    args: {
      default: "controller",
    },
  },
  setup(props, { attrs }) {
    const eventDocumentVisible = ref(false);
    return {
      eventDocumentVisible,
    };
  },
});
</script>

<style   scoped>
* {
  margin: 0;
  padding: 0;
}
.func-wrap {
  background: #2F3129;
  position: relative;
}
.func-help {
  position: absolute;
  right: 15px;
  top: 10px;
  color: yellow;
  font-size: 16px;
  cursor: pointer;
}
.func-start,
.func-end {
  color: white;
  font-size: 19px;
  padding-left: 58px;
  line-height: 50px;
}
</style>
